import React from "react";

import {
    // HashRouter as Router, //容器
    BrowserRouter as Router, //容器
    Route, //一条路由
    Link,
    Switch
} from "react-router-dom";

import "bootstrap/dist/css/bootstrap.css";
import User from "./User";
import Home from "./Home";
import Profile from "./Profile";
import Login from "./Login";
import ProtectedRoute from "./ProtectedRoute";
import MenuLink from "./MenuLink";
import Notfound from "./Notfound";
/*
 *  当用户访问个人设置的时候,先判断此用户是否登录.如果已经登录则可以直接显示个人设置页面.如果此用户未登录,那么则跳转到登录页面进行登录,如果登录成功则自动跳转回登录前的页面
*/

export default(
    <Router >
        <div>
            <nav className="navbar navbar-inverse">
                <div className="container-fluid">
                    <div className="navbar-header">
                        <div className="navbar-brand">
                            <Link to="/home">router</Link>
                        </div>
                    </div>
                    <ul className="nav navbar-nav">
                        <MenuLink to='/home' label="首页"/>
                        <MenuLink to='/user' label="用户管理"/>
                        <MenuLink to='/profile' label="个人设置"/>
                    </ul>
                </div>
            </nav>

            <div className="container">
                <div className="row">
                    <div className="col-sm-12">
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route path="/home" component={Home}/>
                            <Route path="/user" component={User}/> {/* <Route path="/profile" component={Profile}/> */}
                            <ProtectedRoute path="/profile" component={Profile}/>
                            <Route path="/login" component={Login}/>
                            <Route component={Notfound}/>
                        </Switch>
                    </div>
                </div>
            </div>
        </div>
    </Router>
)